Don't Just Feel Font Weight | 매거진에 참여하세요
Don't Just Feel Font Weight
#bold #fontweight #reason #typography #contents #contrast #guide
When choosing a font, most designers know to think about the typeface.
But when it comes to font weight, too many rely on intuition.
"Thin looks elegant."
"Bold feels strong."
And yet, these assumptions can lead to design decisions that undermine readability, accessibility, and even brand clarity.
In this post, we’ll walk you through the fundamentals of font weight,
when and how to use each level, and—most importantly
the research-backed reasons for making those choices.
What Is Font Weight?
Font weight refers to the thickness of a typeface’s strokes. In CSS
font-weight : 500
property ranges from 100 (very thin) to 900 (extremely bold),
often in increments of 100. Each level serves a different visual and functional purpose:
Weight | Name | Characteristics |
|---|---|---|
100 | Thin | Ultra-light, delicate, modern feel |
200 | Extra Light | Minimal and airy |
300 | Light | Clean and minimal, sometimes used for body copy |
400 | Regular | Standard readability, ideal for paragraphs |
500 | Medium | Slight emphasis, balanced for neutral UIs |
600 | Semi Bold | Good for subheaders or CTA buttons |
700 | Bold | Common for headings and emphasized text |
800 | Extra Bold | High-impact, often used in branding |
900 | Black/Heavy | Strongest emphasis, suited for logos or banners |
"Why This Weight?" — Research-Backed Answers
Design shouldn’t rely on vibes alone.
Several studies back up why some weights perform better than others in different contexts:
1. Bernard et al. (2003) – Readability Study
- Best readability: Regular (400) and Semi-Bold (600)
- Poor readability: Thin weights (100–300), especially at small sizes
- Bold weights (700+) reduce letter distinction, slowing recognition speed
2. Dyson & Haselgrove (2001) – Eye Tracking
- Optimal saccade flow with Medium weights (400–500)
- Overly light or heavy weights cause visual fatigue and slower reading
3. Google Fonts UX Study
- Regular (400) was rated most readable for body text
- Light (≤300) decreased recognition rates, especially on mobile
- Bold (700) caught attention but hurt paragraph readability
4. WebAIM Accessibility Guidelines
Users with visual impairments or presbyopia benefit from 600+
Thin fonts can violate contrast standards and reduce legibility
Recommended Font Weights by Use Case
Use Case | Recommended Weight | Why? |
|---|---|---|
Body Text | 400 | Best balance of legibility and comfort |
Small UI Elements | 500–600 | Stronger visibility in small interfaces |
Section Headings | 600–700 | Clear hierarchy, draws attention |
Buttons / CTAs | 600+ | Emphasizes interactivity |
Branding / Logos | 100 or 900 | Creates distinct and memorable impression |
Accessibility Needs | 600+ | Improves recognition for visually impaired users |
Things to Keep in Mind
1. Not All Fonts Support Every Weight
e.g., Noto Sans supports 100–900, but Pretendard may not.
2. Performance Matters
Loading too many font weights (e.g., 5+) can slow down your site.
3. Use Contrast Intentionally
If both your heading and body use bold, nothing stands out.
4. Mobile Precision
Thin fonts may pixelate or blur on lower-resolution screens.
Design Is About Justification, Not Just Intuition
Choosing a font weight isn’t just a matter of taste—it's a decision that affects UX, hierarchy, and accessibility.
As designers, developers, or product teams, we need to justify our choices.
A thoughtful font-weight can enhance clarity, guide the user’s eye, and elevate the brand.
Before you use boldbold
ask yourself:
- Why is this bold?
- Why not medium or regular?
If you can answer those questions, you’re not just designing—you’re designing well.
- link_kakaolink_kakao_url
- link_operatorlink_operator_url
- link_investhelp@letspl.me
- link_ad_urllink_ad
